<template>
  <div ref="riskGraph" class="graph-container"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'RiskChart',
  mounted() {
    this.initChart();
    window.addEventListener('resize', this.resizeChart); // 监听窗口大小变化
  },
  methods: {
    initChart() {
      this.riskChart = echarts.init(this.$refs.riskGraph);

      const riskOption = {
        tooltip: {
          formatter: '{b}'  // 提示框内容
        },
        animationDurationUpdate: 1500,  // 更新动画持续时间
        animationEasingUpdate: 'quinticInOut',  // 更新动画缓动效果
        series: [{
          type: 'graph',
          layout: 'force', // 使用力导向布局
          symbolSize: 50,  // 节点大小
          roam: true,  // 启用缩放和拖拽
          draggable: true, // 允许节点被拖动
          center: ['50%', '50%'],  // 图表中心位置
          zoom: 1,  // 固定缩放比例
          label: {
            show: true,  // 显示标签
            position: 'right',  // 标签位置
            formatter: '{b}',  // 标签内容
            fontSize: 12  // 标签字体大小
          },
          edgeSymbol: ['circle', 'arrow'],  // 边线的箭头样式
          edgeSymbolSize: [4, 10],  // 箭头的大小
          edgeLabel: {
            fontSize: 12  // 边线标签字体大小
          },
          data: [
            {
              name: '核心零件供应商',
              itemStyle: {
                color: '#e20a0a'
              }
            },
            {
              name: '机翼生产商',
              itemStyle: {
                color: '#2061dc'
              }
            },
            {
              name: '起落架生产商',
              itemStyle: {
                color: '#2061dc'
              }
            },
            {
              name: '发动机生产商',
              itemStyle: {
                color: '#2061dc'
              }
            },
            {
              name: '航电系统生产商',
              itemStyle: {
                color: '#2061dc'
              }
            },
            {
              name: '电器部件生产商',
              itemStyle: {
                color: '#2061dc'
              }
            },
            {
              name: '机翼部件',
              itemStyle: {
                color: '#4bd037'
              }
            },
            {
              name: '起落架部件',
              itemStyle: {
                color: '#4bd037'
              }
            },
            {
              name: '发动机部件',
              itemStyle: {
                color: '#4bd037'
              }
            },
            {
              name: '航电系统部件',
              itemStyle: {
                color: '#4bd037'
              }
            }
          ],
          links: [
            {
              source: '核心零件供应商',
              target: '机翼生产商',
              lineStyle: {
                color: '#cb3b3b',
                width: 2
              }
            },
            {
              source: '核心零件供应商',
              target: '起落架生产商',
              lineStyle: {
                color: '#cb3b3b',
                width: 2
              }
            },
            {
              source: '核心零件供应商',
              target: '发动机生产商',
              lineStyle: {
                color: '#cb3b3b',
                width: 2
              }
            },
            {
              source: '核心零件供应商',
              target: '航电系统生产商',
              lineStyle: {
                color: '#cb3b3b',
                width: 2
              }
            },
            {
              source: '机翼生产商',
              target: '机翼部件',
              lineStyle: {
                color: '#0d5e8a',
                width: 2
              }
            },
            {
              source: '起落架生产商',
              target: '起落架部件',
              lineStyle: {
                color: '#0d5e8a',
                width: 2
              }
            },
            {
              source: '发动机生产商',
              target: '发动机部件',
              lineStyle: {
                color: '#0d5e8a',
                width: 2
              }
            },
            {
              source: '航电系统生产商',
              target: '电器部件生产商',
              lineStyle: {
                color: '#0d5e8a',
                width: 2
              }
            },
            {
              source: '电器部件生产商',
              target: '航电系统部件',
              lineStyle: {
                color: '#0d5e8a',
                width: 2
              }
            }
          ],
          lineStyle: {
            opacity: 0.9,  // 边线透明度
            width: 2,  // 边线宽度
            curveness: 0  // 曲线程度
          },
          force: {
            repulsion: 200, // 节点之间的斥力因子，值越大节点越分散
            edgeLength: 150 // 边的长度
          }
        }]
      };

      this.riskChart.setOption(riskOption);
    },
    resizeChart() {
      if (this.riskChart) {
        this.riskChart.resize();
      }
    }
  },
  beforeDestroy() {
    if (this.riskChart) {
      this.riskChart.dispose();
    }
    window.removeEventListener('resize', this.resizeChart);
  }
};
</script>

<style scoped>
.graph-container {
  /* 调整宽度和高度 */
  width: 1120px;
  height: 700px;
  display: flex;
  justify-content: center;
  align-items: center;
//border: 1px solid #2c2a2a;
//border-radius: 4px;
  position: relative;
}
</style>
